<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2024-04-25 16:42:40
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-05-06 15:34:42
 * @FilePath: \cxl-driving-training\src\views\mini\Avatar.vue
-->
<template>
    <div class="page-box-detail">
        <div class="btn"><el-button @click="onDelete">删除</el-button></div>
        <div class="list">
            <div
                :class="['item', item.select ? 'active' : '']"
                v-for="(item, index) in list"
                :key="index"
                @click="onSelect(index)"
            >
                <img :src="item.avatarStr" alt="" />
            </div>
        </div>

        <div class="pagination">
            <p>共 {{ pagination.total }} 条</p>
            <el-pagination
                v-model:current-page="pagination.current"
                v-model:page-size="pagination.size"
                background
                layout="prev, pager, next, sizes"
                :total="pagination.total"
                @size-change="onPageSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { avatarImageDelete, avatarImageList } from '@/apis/wxMini'
import { onMounted, reactive } from 'vue'
import paginationVue from '@/components/Pagination.vue'

interface itemProps {
    avatarStr: string
    id: string
    size: string
    select: boolean
}
const list: itemProps[] = reactive([])
const selectId: string[] = reactive([])

const pagination = reactive({
    current: 1,
    size: 50,
    total: 0
})

const onSelect = (index: number) => {
    list[index].select = !list[index].select
}

const onDelete = () => {
    list.forEach((item: itemProps) => {
        if (item.select) {
            selectId.push(item.id)
        }
    })
    avatarImageDelete(selectId).then(res => {
        console.log(res)
        getList()
    })
}
const getList = () => {
    avatarImageList(pagination.current, pagination.size).then(res => {
        console.log(res)
        if (Number(res.data.code) === 200) {
            list.length = 0
            pagination.total = res.data.result.total
            res.data.result.records.forEach((item: any) => {
                list.push({ ...item, select: false })
            })
        }
    })
}

/**
 * 监听选择的当前分页
 * @param index
 */
const handleCurrentChange = (index: number) => {
    pagination.current = index
    getList()
}
/**
 * 监听分页大小的改变
 * @param index
 */
const onPageSizeChange = (index: number) => {
    pagination.size = index
    getList()
}

onMounted(() => {
    getList()
})
</script>

<style scoped lang="scss">
.pagination {
    display: flex;
    align-items: center;
    justify-content: end;

    p {
        font-size: 14px;
        margin-right: 16px;
    }
}
.list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .item {
        width: 100px;
        height: 100px;
        margin: 8px;
        box-sizing: border-box;
        padding: 4px;
        border: 2px solid transparent;
        cursor: pointer;

        img {
            display: block;
            width: 100%;
            height: 100%;
        }
        &.active {
            border: 2px dashed #409eff;
        }
    }
}
</style>
